<template>
  <el-dialog
      destroy-on-close
      :modal="false"
      append-to-body
      class="EditFlowDialog"
      v-model="visible"
      fullscreen
  >
    <CreateDirectly @createSuccess="createSuccess" @createFail="createFail" :createApproverType="createApproverType"
                    :editId="editId"/>
  </el-dialog>
</template>
<script setup name="EditFlowDialog">
import CreateDirectly from '@/views/flow/createDirectly'
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  editId: {
    type: [String,
      Number],
    default: ''
  },
  createApproverType: {
    type: [String],
    default: ''
  },
})
const emits = defineEmits(['update:modelValue', 'idFinish'])
const visible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emits('update:modelValue',
        value)
  }
})
const id = computed({
  get() {
    return props.editId
  },
  set(value) {
    emits('idFinish',
        value)
  }
})
const createSuccess = () => {
  visible.value = false
  id.value = ''
}
const createFail = () => {
  visible.value = false
}
</script>
<style lang="scss">
.EditFlowDialog {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden !important;
  .el-dialog__header {
    width: 100%;
    flex: 0 0 45px;
  }
  .el-dialog__body {
    width: 100%;
    flex: 1 1 100%;
    overflow: hidden;
  }
}
</style>
